<template>
  <DetailsFormBox :title="dataInfo?.table?.title" :type="route.query.type" :form="data.form" :btns="[
    {
      title: '重置',
      icon: '',
      type: '',
      hidden: !isEdit,
      click: getForm,
    },
    {
      title: '保存',
      icon: '',
      type: 'primary',
      hidden: !isEdit,
      click: (form: any) => {
        saveBtn(form)
      },
    },
  ]" :loading="data.loading" :json="dataInfo">
    <template #default="{ form }">
      <div class="formMain">
        <ElFormItemBox label="供应商编号" :prop="`supplierNumber`">
          <ElInputBox :data="form" dataName="supplierNumber" placeholder="系统自动生成" disabled />
        </ElFormItemBox>
        <ElFormItemBox label="供应商名称" :prop="`supplierName`" isRules>
          <ElInputBox :data="form" dataName="supplierName" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="供应商简称" :prop="`supplierShortName`">
          <ElInputBox :data="form" dataName="supplierShortName" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="供应商类型" :prop="`supplierType`" isRules>
          <ElSelectBox :data="form" dataName="supplierType" :options="options.supplierType" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="结算方式" :prop="`settlementWay`" isRules>
          <ElRadioBox :data="form" dataName="settlementWay" :options="options.settlementWay" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="联系人" :prop="`contactPerson`" isRules>
          <ElInputBox :data="form" dataName="contactPerson" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="联系电话" :prop="`contactMobile`" isRules rulesType="phone">
          <ElInputBox :data="form" dataName="contactMobile" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="发票类型" :prop="`invoiceType`" isRules>
          <ElRadioBox :data="form" dataName="invoiceType" :options="proxy.$optionsArr.invoiceType"
            :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="税率" :prop="`taxRate`" isRules>
          <ElNumberBox :data="form" dataName="taxRate" :max="100" :min="1" unit="%" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="纳税人识别号" :prop="`dutyParagraph`">
          <ElInputBox :data="form" dataName="dutyParagraph" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="单位地址" :prop="`companyAddress`">
          <ElInputBox :data="form" dataName="companyAddress" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="开户电话" :prop="`accountOpeningTelephone`">
          <ElInputBox :data="form" dataName="accountOpeningTelephone" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="银行账号" :prop="`bankAccount`">
          <ElInputBox :data="form" dataName="bankAccount" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="开户银行" :prop="`bankAddress`">
          <ElInputBox :data="form" dataName="bankAddress" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="供应商电话" :prop="`supplierTel`">
          <ElInputBox :data="form" dataName="supplierTel" :disabled="!isEdit" />
        </ElFormItemBox>
        <ElFormItemBox label="供应商地址" :prop="`site`">
          <div class="list-b-8 wAuto">
            <ElCascaderBox :data="form" placeholder="请选择省/市/区" :dataName="['province', 'city', 'country']"
              :options="options.treeArea" labelName="areaName" valueName="areaCode" />
            <ElInputBox :data="form" dataName="site" placeholder="详细地址" type="textarea" />
          </div>
        </ElFormItemBox>
        <ElFormItemBox label="备注" :prop="`stockGoodsDesc`">
          <ElInputBox :data="form" dataName="stockGoodsDesc" type="textarea" :disabled="!isEdit" />
        </ElFormItemBox>
      </div>
    </template>
  </DetailsFormBox>
</template>
<script setup lang="ts">
import { sendMsg } from '@/utils/crossTagMag.ts';
import { getTreeAreaDataList } from '@/utils/optionsArr.ts';
import { getCurrentInstance, onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { useListComponent } from '../pageTs'; // 引入逻辑
const { dataInfo, options } = useListComponent();
const { proxy } = getCurrentInstance() as any;
const data: any = reactive({
  loading: false,
  loadingMsg: '',
  form: {
    supplierID: null, // 供应商主键ID
    supplierCode: "", // 供应商编码（唯一识别码）
    supplierType: "", // 供应商类型（外联字典明细表唯一识别码）
    supplierName: "", // 供应商名字（个体工商户名字、代销企业名称、厂家名称等）
    supplierShortName: "", // 供应商简称
    settlementWay: "", // 结算方式代码
    contactPerson: "", // 联系人姓名
    contactMobile: "", // 联系人电话
    supplierTel: "", // 供应商电话/手机号
    province: "", // 省级地区代码
    city: "", // 市级地区代码
    country: "", // 县级地区代码
    supplierAddress: "", // 供应商地址
    supplierRemark: "", // 供应商备注
    invoiceType: 2, // 发票类型：1普通发票；2专用发票
    taxRate: 13, // 税率（如：0.13 表示13%）
    dutyParagraph: "", // 税号
    companyAddress: "", // 单位地址
    accountOpeningTelephone: "", // 开户电话
    bankAccount: "", // 银行账号
    bankAddress: "" // 开户行地址
  },
});
// 获取当前路由对象
const route = useRoute();
const saveBtn = (form: any) => {
  if (form.supplierCode) {
    //修改物料
    proxy.$api.Supplier.UpdateSupplier(form)
      .then((res: any) => {
        _sun()
      })
      .catch(() => { });
  } else {
    //添加物料
    proxy.$api.Supplier.AddSupplier(form)
      .then((res: any) => {
        _sun()
      })
  }
  function _sun() {
    proxy.$message('保存成功')
    sendMsg('save', true);
    // getForm()
    window.close();
  }
};
const isEdit = ref(true)
const getForm = () => {
  let _query: any = route.query
  if (!_query.supplierID) {
    data.loading = false
    return
  }
  proxy.$api.Supplier.GetSingleSupplier({
    queryBy: 1,
    queryValue: _query.supplierID,
  })
    .then((res: any) => {
      proxy.$message('获取成功')
      isEdit.value = (['1', '2'].includes(_query.type))
      data.form = {
        ...res,
        invoiceType: res.invoiceType || null,
      }
      data.loading = false
    })
    .catch(() => {
      data.loading = false
    });
};
onMounted(() => {
  getForm()
  getTreeAreaDataList(options, 'treeArea')
});
</script>
